<template>
  <div id="yingmoo-index">
    <ym-header></ym-header>
    <div class="yingmoo-index">


      <!-- 导航组件-->
      <ym-navbar></ym-navbar>

      <!-- 轮播组件 -->
      <ym-banner></ym-banner>

      <!-- 鹰目商城 -->
      <ym-store></ym-store>

      <!-- 热点推荐 -->
      <ym-hot></ym-hot>

      <!-- 广告条 -->
      <ym-banner-bar></ym-banner-bar>

      <!-- 鹰目搜索 -->
      <ym-search></ym-search>

      <!-- 案例展示、专题活动 -->
      <div class="yingmoo-column clearfix">
        <div class="yingmoo-scheme left">
          <div class="column-navbar grey">
            <h1 class="column-title">
              <img class="column-icon" src="../assets/ym-index/icon-yun1.png" />
              <span class="column-name">案例展示</span>
              <img class="column-arrow" src="../assets/ym-index/bg-arrow.png" />
            </h1>
          </div>
          <ul class="column-content">
            <li v-for="(v,i) in optimize_list" :key='i'>
              <figure><a :href="v.linkurl" target="_blank"><img width="275px" height="177px" :src="v.imgpath" /></a></figure>
            </li>

          </ul>
        </div>
        <div class="yingmoo-scheme right">
          <div class="column-navbar grey">
            <h1 class="column-title">
              <img class="column-icon" src="../assets/ym-index/icon-yun1.png" />
              <span class="column-name">专题活动</span>
              <img class="column-arrow" src="../assets/ym-index/bg-arrow.png" />
            </h1>
          </div>
          <ul class="column-content">
            <li v-for="(v,i) in topic_list" :key='i'>
              <figure><a :href="v.linkurl" target="_blank"><img width="275px" height="177px" :src="v.imgpath" /></a></figure>
            </li>

          </ul>
        </div>
      </div>

      <!-- 合作商家、媒体套餐 -->
      <div class="yingmoo-column clearfix">
        <div class="yingmoo-business left">
          <div class="business-title">
            <img class="column-icon" src="../assets/ym-index/icon-yun1.png" />
            <span class="column-name">合作商家</span>
          </div>
          <div class="business-cont">
            <ul class="business-list">
              <li v-for="(v, i) in partner_list" :key="i">
              	<a :href="v.linkurl" target="_blank">
                <figure><img width="179px" height="107px" :src="v.imgpath" /></figure>
                </a>
                <p class="p" :title='v.name'>{{v.name}}</p>
              </li>
            </ul>
          </div>
        </div>
        <div class="yingmoo-business right">
          <div class="business-title">
            <img class="column-icon" src="../assets/ym-index/icon-yun1.png" />
            <span class="column-name">媒体套餐</span>
          </div>
          <div class="business-cont">
            <ul class="business-list">
              <li v-for="(v,i) in media_list" :key='i'>


                	<figure>
                		<a :href="v.linkurl" target="_blank"><img width="250px" height="145px" :src="v.imgpath"/></a>
                	</figure>
                <p :title='v.name'>{{v.name}}</p>
              </li>
            </ul>
          </div>
        </div>
      </div>

      <!-- 行业资讯、企业专访、新闻中心 -->
      <div class="yingmoo-column yingmoo-message">
        <div class="message-item">
          <div class="message-title">
            <img class="column-icon" src="../assets/ym-index/icon-yun2.png" />
            <span class="column-name">行业资讯</span>
          </div>
          <div class="message-cont">
            <ul class="message-list">
              <li v-for="(v,i) in information_list" :key="i"><a :href="v.linkurl" target="_blank">{{v.name}}</a></li>
            </ul>
          </div>
        </div>
        <div class="message-item">
          <div class="message-title">
            <img class="column-icon" src="../assets/ym-index/icon-yun2.png" />
            <span class="column-name">企业专访</span>
          </div>
          <div class="message-cont">
            <ul class="message-list">
              <li v-for="(v,i) in interview_list" :key="i"><a :href="v.linkurl">{{v.name}}</a></li>
            </ul>
          </div>
        </div>
        <div class="message-item">
          <div class="message-title">
            <img class="column-icon" src="../assets/ym-index/icon-yun2.png" />
            <span class="column-name">新闻中心</span>
          </div>
          <div class="message-cont">
            <ul class="message-list">
              <li v-for="(v,i) in business_list" :key="i"><a :href="v.linkurl">{{v.name}}</a></li>
            </ul>
          </div>
        </div>
      </div>

      <!-- 战略合作伙伴 -->
      <ym-partner></ym-partner>


    </div>

    <!-- 底部导航组件 -->
    <ym-footer></ym-footer>
  </div>
</template>

<script>

import 'swiper/dist/css/swiper.css'
// import VueAwesomeSwiper from 'vue-awesome-swiper'

import ymHeader from "@/components/ymHeader.vue";
import ymNavbar from "@/components/ymNavbar.vue";
import ymBanner from "@/components/ymBanner.vue";
import ymStore from "@/components/ymStore.vue";
import ymHot from "@/components/ymHot.vue";
import ymBannerBar from "@/components/ymBannerBar.vue";
import ymSearch from "@/components/ymSearch.vue";
import ymPartner from "@/components/ymPartner.vue";
import ymFooter from "@/components/ymFooter.vue";
export default {
  name: "yingmoo-index",
  components: {
    ymHeader,
    ymNavbar,
    ymBanner,
    ymStore,
    ymHot,
    ymBannerBar,
    ymSearch,
    ymPartner,
    ymFooter
  },
  mounted() {
    this.getSearchList(7, 2);
    this.getSearchList(8, 2);
    this.getSearchList(9, 6);
    this.getSearchList(10, 4);
    this.getSearchList(11, 6);
    this.getSearchList(12, 6);
    this.getSearchList(13, 6);
  },
  data() {
    return {
      requestAddr: this.GLOBAL.addr,
      optimize_list: [], //优化方案
      topic_list: [], //专题活动
      partner_list: [], //合作伙伴
      media_list: [], //媒体套餐
      information_list: [], //行业资讯
      interview_list: [], //企业专访
      business_list: [] //招商合作
    };
  },
  methods: {
    getSearchList: function(adid, limit) {
      this.$http({
        url:
          this.requestAddr +
          "/GetJson/get/adshow?adid=" +
          adid +
          "&limit=" +
          limit,
        method: "JSONP",
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        },
        jsonp: "callbackparam"
      })
        .then(res => {
          /*console.log(res.data);*/
          if (res.data != null) {
            if (adid == 7) {
              this.optimize_list = res.data;
            }
            if (adid == 8) {
              this.topic_list = res.data;
            }
            if (adid == 9) {
              this.partner_list = res.data;
            }
            if (adid == 10) {
              this.media_list = res.data;
            }
            if (adid == 11) {
              this.information_list = res.data;
            }
            if (adid == 12) {
              this.interview_list = res.data;
            }
            if (adid == 13) {
              this.business_list = res.data;
            }
          }
        })
        .catch();
    }
  }
};
</script>

<style lang="less">
.el-carousel {
  overflow-y: hidden !important;
}
.el-tabs--card > .el-tabs__header {
  background-color: #3fa9f5;
  border-bottom: none;
  margin-bottom: 0;
}

.el-tabs--card > .el-tabs__header .el-tabs__nav {
  border: none !important;
}
.el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
  border: none !important;
}
.el-tabs__nav-scroll {
  height: 45px;
}
.el-tabs--card > .el-tabs__header .el-tabs__item {
  width: 155px;
  height: 44px;
  line-height: 44px;
  text-align: center;
  border: none !important;
  color: white;
  background-image: url(../assets/ym-index/bg-nav.png);
  background-position: left center;
  background-repeat: no-repeat;
  &:hover {
    background-color: darken(#3fa9f5, 10%);
  }
  &.is-active {
    background-color: darken(#3fa9f5, 10%);
  }
}

.yingmoo-column {
  width: 1200px;
  margin: 0 auto;
  margin-bottom: 15px;
  position: relative;
  @w: 247px;
  .column-navbar {
    height: 44px;
    line-height: 44px;
    position: relative;
    &.grey {
      background-color: #e6e6e6;
    }
    .column-title {
      position: absolute;
      left: 0;
      top: 0;
      z-index: 1;
      width: @w;
      color: #fbb03b;
      font-size: 18px;
      background-color: #036eb7;
      .column-icon {
        margin-left: 26px;
      }
      .column-arrow {
        position: absolute;
        right: -26px;
        top: 0;
      }
    }
    .column-subtitle {
      margin-left: @w;
      background-color: #3fa9f5;
      display: flex;
      li {
        width: 136px;
        text-align: center;
        color: #fff;
        font-size: 15px;
        background-image: url(../assets/ym-index/bg-nav.png);
        background-position: left center;
        background-repeat: no-repeat;
        &:last-child {
          border-right: none;
        }
        &:hover {
          background-color: darken(#3fa9f5, 10%);
        }
      }
    }
    .column-more {
      position: absolute;
      right: 1em;
      top: 0;
      background-color: transparent;
      color: #fbb03b;
      font-size: 16px;
      font-weight: 800;
    }
  }
  .column-left {
    width: @w;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
  }
  .column-content {
    background: #fff;
  }
}
</style>

<style scoped lang="less">
.yingmoo-index {
  background-color: #f3f9ff;
  background-image: url(../assets/soso/first_img1.png);
  background-repeat: no-repeat;
  background-size: 100%;
}

/* 案例展示、专题活动 */

.yingmoo-scheme {
  width: 590px;
  &.left {
    float: left;
  }
  &.right {
    float: right;
  }
  .column-content {
    display: flex;
    justify-content: space-between;
    padding: 16px;
    li {
      figure img {
        display: block;
      }
    }
  }
}

/* 合作商家、媒体套餐 */

.yingmoo-business {
  background: #fff;
  width: 590px;
  &.left {
    float: left;
    .business-cont li {
      width: 33.33%;
    }
  }
  &.right {
    float: right;
    .business-cont li {
      width: 50%;
    }
  }
  .business-title {
    background-color: #036eb7;
    height: 44px;
    line-height: 44px;
    text-align: center;
    color: #fff;
    font-size: 18px;
    background-color: #3fa9f5;
    background-color: #036eb7;
  }
  .business-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    height: 390px;
    li {
      height: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      figure img {
        display: block;
      }
      p {
        height: 17px;
        overflow: hidden;
        font-size: 14px;
        padding-top: 8px;
        text-overflow: clip;
      }
      .p {
        margin-top: 20px;
      }
    }
  }
}

/* 行业资讯、企业专访、新闻中心 */

.yingmoo-message {
  display: flex;
  justify-content: space-between;
  .message-item {
    width: 390px;
    height: 250px;
    .message-title {
      height: 44px;
      line-height: 44px;
      text-align: center;
      color: #fff;
      font-size: 18px;
      background-color: #3fa9f5;
      .column-icon {
        margin-right: 5px;
      }
    }
    .message-cont {
      background: #fff;
      .message-list {
        padding: 0.5em 0;
        li {
          line-height: 2;
          padding-left: 14px;
          color: #333333;
          cursor: pointer;
          a {
            font-size: 14px;
          }
        }
      }
    }
  }
}
</style>
